/*
 * CloudBeaver - Cloud Database Manager
 * Copyright (C) 2020-2024 DBeaver Corp and others
 *
 * Licensed under the Apache License, Version 2.0.
 * you may not use this file except in compliance with the License.
 */

@layer components {
  .spinner {
    --dbv-kit-spinner-stroke-color: var(--theme-primary);
    --dbv-kit-spinner-small-height: 16px;
    --dbv-kit-spinner-medium-height: 40px;
    --dbv-kit-spinner-large-height: 60px;
    --dbv-kit-spinner-xlarge-height: 80px;
  }

  .spinnerSecondary,
  :global(.secondary),
  :global(.secondary) svg {
    --dbv-kit-spinner-stroke-color: var(--theme-on-primary);
  }

  .loader {
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
    &:global(.animate) {
      opacity: 1;
    }
  }
  .message {
    padding: 16px;
  }
  .actions {
    padding-top: 42px;
  }
  .loader.inline {
    flex-direction: row;
    margin: 0;
    justify-content: left;
    & .message {
      display: block;
      padding: 0 16px;
    }
    & .actions {
      padding: 0;
    }
  }
  .loader.small {
    & .message {
      display: none;
    }
  }
  .loader.fullSize {
    height: 100%;
    width: 100%;
    & .spinner {
      width: 100%;
      height: 100%;
    }
  }

  .loaderOverlay {
    composes: theme-text-on-primary from global;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
  }
}
